<template>
		<div>
			<!-- hotcities热门城市 -->
			<div class="city-hot">
				<div class="hot-title">热门城市</div>
				<ul class="hot-list">
					<li v-for='(item,index) in hotCities' :key="index" @click="changeCityName(item.name)">{{item.name}}</li>
				</ul>
			</div>
			
			<!-- 字母排序 -->
			<div class="city-sort">
				<div class="sort-title">字母排序</div>
				<ul class="sort-list">
					<li v-for='(item,index) in city' :key="index" >{{item.initial}}</li>
				</ul>
			</div>
			
			<!-- list城市首字母列表 -->
			<div class="city-list">
		<template v-for='(item,index) in CityList' :key="index" >
			<div class="list-title">{{item.initial}}</div>
			<ol class="list-item">
				<li v-for='(lis,index) in item.list' :key="index" @click="changeCityName(lis.name)">{{lis.name}}</li>
			</ol>
			</template>
		</div>
		</div>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default{
		props:['CityList','hotCities','city'],
		methods:{
			//当点击changeCityName 获取当前被点击的li的标签的城市名；2.跳转到首页
			changeCityName(cityname){
				this.changeCity(cityname);
				this.$router.push('/')
			},
			//调用vuex内mutations里面的函数 changeCity
			...mapMutations(['changeCity'])
			}
	}
</script>

<style scoped>
	/* <!-- list城市首字母列表 --> */
	.city-list{
			width: 100%;
			font-size: 0.28rem;
		}
		.list-title{
			padding: 0.2rem 0.3rem;
		}
		.list-item{
			background-color: white;
			color: #212121;
			position: relative;
			overflow: hidden;
			padding: 0px;
		}
		.list-item:before{
			content: "";
			position: absolute;
			border-left: 1px solid #ddd;
			border-right: 1px solid #ddd;
			width: 25%;
			height: 100%;
			left: 25%;/* 左边的作用，是将覆盖在ul上方的区域向左移动一个li标签的宽度 */
		}
		.list-item:after{
			content: "";
			position: absolute;
			border-right: 1px solid #ddd;
			width: 0%;  /*解决第三列不可点击效果*/
			height: 100%;
			right: 25%;
		}
		.list-item li{
			width: 25%;
			height: 0.9rem;
			text-align: center;
			line-height: 0.9rem;
			float: left;
			border-bottom:  1px solid #ddd;
			position: relative; /*解决第二列不可点击效果*/
		}
	/* 热门城市 */
	.city-hot{
			width: 100%;
			font-size: 0.28rem;
		}
		.hot-title{
			padding: 0.2rem 0.3rem;
		}
		.hot-list{
			background-color: white;
			color: #212121;
			position: relative;
			overflow: hidden;
		}
		.hot-list:before{
			content: "";
			position: absolute;
			border-left: 1px solid #ddd;
			border-right: 1px solid #ddd;
			width: 33.333%;
			height: 100%;
			left: 33.333%;/* 左边的作用，是将覆盖在ul上方的区域向左移动一个li标签的宽度 */
		}
		.hot-list li{
			width: 33.333%;
			height: 0.9rem;
			text-align: center;
			line-height: 0.9rem;
			float: left;
			border-bottom:  1px solid #ddd;
			position: relative;
		}
	/* 字母排序 */
	.city-sort{
			width: 100%;
			font-size: 0.28rem;
		}
		.sort-title{
			padding: 0.2rem 0.3rem;
		}
		.sort-list{
			background-color: white;
			color: #212121;
			position: relative;
			overflow: hidden;
		}
		
		.sort-list li{
			width: 16.666%;
			height: 0.9rem;
			text-align: center;
			line-height: 0.9rem;
			float: left;
			background-color: white;
		}
</style>
